<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>用户管理</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body class="p-4">
<div class="container">
  <h2>用户管理</h2>

  <h3 id="form-title">新增用户</h3>
  <form id="user-form" class="mb-3 row gx-2 gy-1 align-items-end px-2">
    <input type="hidden" id="user-id">

    <div class="col-md-2">
      <label class="form-label form-label-sm" for="name">姓名</label>
      <input class="form-control form-control-sm" id="name" placeholder="请输入姓名" required>
    </div>
    <div class="col-md-2">
      <label class="form-label form-label-sm" for="gender">性别</label>
      <select class="form-control form-control-sm" id="gender" required>
        <option value="">请选择</option>
        <option value="Male">男</option>
        <option value="Female">女</option>
      </select>
    </div>
    <div class="col-md-2">
      <label class="form-label form-label-sm" for="age">年龄</label>
      <input class="form-control form-control-sm" type="number" id="age" placeholder="请输入年龄" required>
    </div>

    <div class="col-auto">
      <button type="submit" class="btn btn-sm btn-primary">
        <span id="btn-text">新增</span>
      </button>
      <button type="button" id="btn-cancel" class="btn btn-sm btn-secondary" style="display:none">
        取消
      </button>
    </div>
  </form>

  <div class="table-responsive mt-3">
    <table class="table table-bordered table-sm">
      <thead class="table-light">
      <tr>
        <th class="col-id">ID</th>
        <th>姓名</th>
        <th>性别</th>
        <th class="col-age">年龄</th>
        <th class="col-action">操作</th>
      </tr>
      </thead>
      <tbody id="user-table-body"></tbody>
    </table>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  const baseUrl = '/users';

  function enterCreateMode() {
    document.getElementById('form-title').textContent = '新增用户';
    document.getElementById('btn-text').textContent = '新增';
    document.getElementById('btn-cancel').style.display = 'none';
    clearForm();
  }
  function enterEditMode() {
    document.getElementById('form-title').textContent = '编辑用户';
    document.getElementById('btn-text').textContent = '保存';
    document.getElementById('btn-cancel').style.display = 'inline-block';
  }

  async function loadAllUsers() {
    const res = await axios.get(baseUrl);
    const tbody = document.getElementById('user-table-body');
    tbody.innerHTML = '';
    res.data.forEach(u => {
      tbody.insertAdjacentHTML('beforeend', `
          <tr>
            <td>${u.id}</td>
            <td>${u.name}</td>
            <td>${u.gender==='Male'?'男':'女'}</td>
            <td>${u.age}</td>
            <td>
              <button class="btn btn-sm btn-warning me-1" onclick="editUser(${u.id})">编辑</button>
              <button class="btn btn-sm btn-danger" onclick="deleteUser(${u.id})">删除</button>
            </td>
          </tr>
        `);
    });
  }

  async function editUser(id) {
    const res = await axios.get(`${baseUrl}/${id}`);
    const u = res.data;
    document.getElementById('user-id').value = u.id;
    document.getElementById('name').value = u.name;
    document.getElementById('gender').value = u.gender;
    document.getElementById('age').value = u.age;
    document.getElementById('name').focus();
    enterEditMode();
  }

  async function deleteUser(id) {
    if (!confirm('确定删除？')) return;
    await axios.delete(`${baseUrl}/${id}`);
    await loadAllUsers();
  }

  function clearForm() {
    document.getElementById('user-form').reset();
    document.getElementById('user-id').value = '';
    document.getElementById('name').focus();
  }

  document.getElementById('btn-cancel').addEventListener('click', e => {
    e.preventDefault();
    enterCreateMode();
  });

  document.getElementById('user-form').addEventListener('submit', async e => {
    e.preventDefault();
    const id = document.getElementById('user-id').value;
    const payload = {
      id: id ? Number(id) : undefined,
      name: document.getElementById('name').value.trim(),
      gender: document.getElementById('gender').value,
      age: Number(document.getElementById('age').value)
    };

    if (id) {
      await axios.put(`${baseUrl}/${id}`, payload);
    } else {
      delete payload.id;
      await axios.post(baseUrl, payload);
    }

    enterCreateMode();
    await loadAllUsers();
  });

  window.addEventListener('DOMContentLoaded', () => {
    enterCreateMode();
    loadAllUsers();
  });
</script>
</body>
</html>
